<template>
  <ul class="supports" v-if="seller.supports">
    <li v-for="(item,index) in seller.supports" class="support-item">
      <span class="icon" :class="[classMap[index],classMapSize(index)]"></span>
      <span class="text">{{item.description}}</span>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      seller: {
        type: Object
      },
      size: {
        type: Number
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    },
    computed:{
      classMapSize(index){
          return this.classMap[index]+'_' + this.size
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .supports
    .support-item
      margin-bottom: 12px
      font-size: 0
      &:last-child
        margin-bottom: 0
      .icon
        display: inline-block
        margin-right: 6px
        width: 16px
        height: 16px
        vertical-align: top
        background-size: 100%
        &.decrease
          &.decrease_1
            bg-image("decrease_1")
          &.decrease_2
            bg-image("decrease_2")
          &.decrease_3
            bg-image("decrease_3")
          &.decrease_4
            bg-image("decrease_4")
        &.discount
          &.discount_1
            bg-image("discount_1")
          &.discount_2
            bg-image("discount_2")
          &.discount_3
            bg-image("discount_3")
          &.discount_4
            bg-image("discount_4")
        &.guarantee
          &.guarantee_1
            bg-image("guarantee_1")
          &.guarantee_2
            bg-image("guarantee_2")
          &.guarantee_3
            bg-image("guarantee_3")
          &.guarantee_4
            bg-image("guarantee_4")
        &.invoice
          &.invoice_1
            bg-image("invoice_1")
          &.invoice_2
            bg-image("invoice_2")
          &.invoice_3
            bg-image("invoice_3")
          &.invoice_4
            bg-image("invoice_4")
        &.special
          &.special_1
            bg-image("special_1")
          &.special_2
            bg-image("special_2")
          &.special_3
            bg-image("special_3")
          &.special_4
            bg-image("special_4")
      .text
        font-size: 12px
        line-height: 16px
</style>
